<template>
	<view class="user-page">
		<!-- 用户信息 -->
		<view class="user-info-row" @click="toPagePath('/pages/User/UpdateHealthInfo')">
			<view v-if="userInfo">
				<image class="avatar" v-if="userInfo.patHeadImg" :src="hostApi+userInfo.patHeadImg" />
				<view v-else>
					<image class="avatar" v-if="sex.includes('男')" :src="avatarMan" />
					<image class="avatar" v-else :src="avatarWoman" />
				</view>
			</view>
			<view v-else>
				<image class="avatar" v-if="sex.includes('男')" :src="avatarMan" />
				<image class="avatar" v-else :src="avatarWoman" />
			</view>
			<view class="user-info-main">
				<view class="user-name" v-if="userInfo">{{ userInfo.patName }}</view>
				<view class="user-desc">欢迎登陆~</view>
			</view>
			<img class="avatar-camera" src="@/static/images/icon/user-avatar-icon.png" />
		</view>
		<!-- 快捷入口 -->
		<view class="quick-entry">
			<view class="entry-item" v-for="(item,index) in listMyLikes" @click="toPagePath(item.path)">
				<img class="user-icon" :src="hostApi+item.pathImg" />
				<view class="entry-label">{{item.name}}</view>
			</view>
		</view>
		<!-- 就诊人信息卡 -->
		<view class="pad-16r">
			<view class="patient-card" v-if="userInfo">
				<view class="between center">
					<view class="start-center mar-10-0">
						<img class="hospital-logo" v-if="userInfo.campusImage" :src="hostApi+userInfo.campusImage" />
						<img class="hospital-logo" v-else src="/static/images/icon/user-hospital-icon.png" />
						<view class="hospital-name">{{userInfo.campusName}}</view>
					</view>
					<img class="hospital-code" src="/static/images/icon/user-code-icon.png" @click="handleShowCode" />
				</view>
				<view class="patient-info">
					<view class="patient-name">{{userInfo.patName}}</view>
					<view class="patient-gender">{{sex}}</view>
					<view class="patient-age">{{userInfo.patAge}}岁</view>
				</view>
				<view class="patient-card-row">
					<view class="patient-card-label">就诊卡：</view>
					<view class="patient-card-value">{{userInfo.patId}}</view>
					<img class="patient-card-btn" src="/static/images/icon/user-changeCard-icon.png"
						@click="toCardListPage" />
				</view>
			</view>
		</view>
		<!-- 我的订单 -->
		<view class="section-card">
			<view class="section-title-row">
				<view class="section-title">我的订单</view>
				<view class="section-title-bg"></view>
			</view>
			<view class="order-list">
				<view class="order-item" v-for="(item,index) in listMyOrder" @click="toPagePath(item.path)">
					<img class="user-icon" :src="hostApi+item.pathImg" />
					<view class="order-label">{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- 常用服务 -->
		<view class="section-card">
			<view class="section-title-row">
				<view class="section-title">常用服务</view>
				<view class="section-title-bg"></view>
			</view>
			<view class="service-list">
				<view class="order-item" v-for="(item,index) in listHotServe" @click="toPagePath(item.path)">
					<img class="user-icon" :src="hostApi+item.pathImg" />
					<view class="order-label">{{item.name}}</view>
				</view>
			</view>
		</view>
		<List v-show="showCode || showUserList" :showCode='showCode' :showUserList='showUserList' @close='onClose'>
		</List>
	</view>
</template>

<script>
	import {
		mapGetters,
	} from 'vuex';
	import {
		listSex
	} from '../../utils/listSex';
	import {
		menuSelect
	} from '../../api/menu';
	import List from '@/components/UserInfo/list.vue'
	export default {
		components: {
			List
		},
		computed: {
			...mapGetters([
				'userInfo', 'hostApi'
			]),
			sex() {
				const found = this.listSex.find(item => this.userInfo.patSex == item.value);
				return found ? found.label : ''; // 直接返回匹配的性别
			}
		},
		mounted() {
			console.log(this.userInfo)
			this.init()
		},
		data() {
			return {
				avatarWoman: '/static/images/patient/user-avatar.jpg',
				avatarMan: '/static/images/patient/user-avatar-man.jpg',
				listSex: listSex,
				showCode: false, // 是否展示二维码
				showUserList: false, // 是否展示用户切换列表
				listMyLikes: [],
				listMyOrder: [],
				listHotServe: [], //常用服务
			}
		},
		methods: {
			init() {
				menuSelect({
					codes: ["mylikes", "myorder", "hotServe"],
					status: 1,
					orderBy: "sort"
				}).then(res => {
					let listMyLikes = res.mylikes || [];
					let listMyOrder = res.myorder || [];
					let listHotServe = res.hotServe || [];
					listMyLikes.forEach(item => {
						if (item.parentId != 0) {
							this.listMyLikes.push(item);
						}
					})
					listMyOrder.forEach(item => {
						if (item.parentId != 0) {
							this.listMyOrder.push(item);
						}
					})
					listHotServe.forEach(item => {
						if (item.parentId != 0) {
							this.listHotServe.push(item)
						}
					})
				})
			},
			toCardListPage() {
				uni.navigateTo({
					url: '/pages/Login/patientCardList'
				})
			},
			onClose(type) {
				this[type] = false
			},
			handleShowCode() {
				this.showCode = true
				console.log(this.showCode)
			},
			toPagePath(path) {
				if (!this.userInfo) {
					this.$u.toast('请选择就诊卡')
					return;
				}
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-page {
		background: url('@/static/images/imgs/user-bg.png') no-repeat center/cover;
	}

	.user-info-row {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		padding: 40rpx 0 0 40rpx;
		margin-bottom: 16rpx;
	}

	.avatar {
		position: relative;
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		margin-right: 32rpx;
	}

	.user-info-main {
		flex: 1;
	}

	.user-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #222;
	}

	.user-desc {
		font-size: 26rpx;
		color: #888;
		margin-top: 12rpx;
	}

	.avatar-camera {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 70rpx;
		left: 135rpx;
	}

	.quick-entry {
		display: flex;
		justify-content: space-around;
		// margin: 24rpx 0 16rpx 0;
	}

	.entry-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.user-icon {
		width: 64rpx;
		height: 64rpx;
	}

	.entry-label {
		font-size: 26rpx;
		color: #222;
		margin-top: 8rpx;
	}

	.patient-card {
		background: url('@/static/images/imgs/user-card-bg.png') no-repeat center/cover;
		padding: 16rpx;
		position: relative;
		background-size: 100% auto;
	}

	.hospital-logo {
		width: 34rpx;
		height: 34rpx;
		border-radius: 16rpx;
	}

	.hospital-name {
		margin-left: 10rpx;
		height: 12px;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 11px;
		color: #999999;
		line-height: 12px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.hospital-code {

		width: 24px;
		height: 24px;
	}

	.patient-info {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
		// padding: 0 10rpx;
	}

	.patient-name {
		font-size: 32rpx;
		color: #222;
		margin-right: 48rpx;
	}

	.patient-gender,
	.patient-age {
		font-size: 28rpx;
		color: #222;
		margin-right: 48rpx;
	}

	.patient-card-row {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.patient-card-label {
		font-size: 26rpx;
		color: #888;
	}

	.patient-card-value {
		font-size: 26rpx;
		color: #888;
		margin: 0 12rpx 0 6rpx;
	}

	.patient-card-btn {
		height: 34rpx;
		margin-left: 8rpx;
	}

	.section-card {
		background: #fff;
		border-radius: 16rpx;
		margin: 0 24rpx 24rpx 24rpx;
		padding: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	.section-title-row {
		position: relative;
		margin-bottom: 18rpx;
	}

	.section-title {
		font-size: 30rpx;
		color: #333;
		z-index: 1;
		position: relative;
	}

	.section-title-bg {
		position: absolute;
		width: 48rpx;
		height: 15rpx;
		background-color: rgba(65, 207, 230, 0.5);
		bottom: -4rpx;
		left: 36rpx;
		z-index: 0;
	}

	.order-list {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		/* 每行4个，等宽 */
		gap: 20rpx;
		/* 项间距 */
		padding: 12rpx 0;
		margin-bottom: 16rpx;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 8rpx;
	}

	.order-label {
		font-size: 26rpx;
		color: #222;
		margin-top: 8rpx;
	}

	.service-list {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		/* 每行4个，等宽 */
		gap: 20rpx;
		/* 项间距 */
		padding: 12rpx 0;
		margin-bottom: 16rpx;
	}

	.service-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.service-label {
		font-size: 24rpx;
		color: #222;
		margin-top: 8rpx;
	}
</style>